<template>
  <My-popover placement="LB">
    <template #reference>
      <My-svg-icon
        :name="useThemeStore.currentTheme.icon"
        class="guide-theme w-4 h-4 p-1 cursor-pointer rounded-sm duration-200 outline-none"
        fillClass="fill-zinc-900 dark:fill-zinc-300"
      ></My-svg-icon>
    </template>
    <div class="w-[170px]">
      <div
        class="cursor-pointer bg-white/10 dark:bg-white/10 backdrop-blur-lg dark:backdrop-blur-xl border border-white/10 dark:border-white/10 shadow-lg rounded-sm flex flex-col"
      >
        <li
          @click="useThemeStore.changeTheme(k)"
          v-for="k in useThemeStore.ThemeInfo"
          :key="k.title"
          class="flex p-3 items-center hover:bg-zinc-100/80 dark:hover:bg-zinc-700"
        >
          <My-svg-icon
            class="w-1.5 h-1.5 mr-1"
            :name="k.icon"
            fillClass="fill-zinc-900"
          ></My-svg-icon>
          <span class="text-zinc-900 dark:text-zinc-100 text-sm">{{
            k.title
          }}</span>
        </li>
      </div>
    </div>
  </My-popover>
</template>
<script setup>
import useTheme from '@/store/theme/index.js'
const useThemeStore = useTheme()
import useWatchThemeChange from '@/utils/theme.js'
useWatchThemeChange()
</script>
